<template>
    <div>
        <mj-title type="h2" title="Affix 图钉"></mj-title>
        <div class="page-desc">使用图钉，可以将内容固定在屏幕上，并且不随页面的滚动而滚动。</div>

        <mj-title type="h2" title="基础用法"></mj-title>
        <div class="page-desc">简单使用，当元素不可见时，直接固定在最顶端。</div>
        <div class="input">
            <mj-affix>
                <span class="demo-affix">固定在最顶部</span>
            </mj-affix>
            <pre>
                <code class="language-html line-num bers">
                    &lt;template>
                    &lt;mj-affix>
                        &lt;span class="demo-affix">固定在最顶部&lt;/span>
                    &lt;/mj-affix>
                &lt;/template>

                &lt;script>
                    export default {
                        data() {
                            return {
                            }
                        }
                    }
                &lt;/script>
                </code>
            </pre>
        </div>

        <mj-title type="h2" title="偏移"></mj-title>
        <div class="page-desc">当滚动到一定距离时再固定。</div>
        <div class="input">
            <mj-affix :offset-top="50">
                <span class="demo-affix">固定距离顶部50px距离</span>
            </mj-affix>
            <pre>
                <code class="language-html line-num bers">
                    &lt;template>
                    &lt;mj-affix :offset-top="50">
                        &lt;span class="demo-affix">固定距离顶部50px距离&lt;/span>
                    &lt;/mj-affix>
                &lt;/template>

                &lt;script>
                    export default {
                        data() {
                            return {
                            }
                        }
                    }
                &lt;/script>
                </code>
            </pre>
        </div>

        <mj-title type="h2" title="固定在底部"></mj-title>
        <div class="page-desc">在屏幕下方固定。</div>
        <div class="input">
            <mj-affix :offset-bottom="20">
                <span class="demo-affix">固定在距离底部20px的位置</span>
            </mj-affix>
            <pre>
                <code class="language-html line-num bers">
                    &lt;template>
                    &lt;mj-affix :offset-bottom="20">
                        &lt;span class="demo-affix">固定在距离底部20px的位置&lt;/span>
                    &lt;/mj-affix>
                &lt;/template>

                &lt;script>
                    export default {
                        data() {
                            return {
                            }
                        }
                    }
                &lt;/script>
                </code>
            </pre>
        </div>

        <mj-title type="h2" title="固定状态改变时的回调"></mj-title>
        <div class="page-desc">当固定状态发生改变时，会触发事件。</div>
        <div class="input">
            <mj-affix :offset-top="120" @on-change="change">
                <span class="demo-affix">固定在距离顶部120px的位置</span>
            </mj-affix>
            <pre>
                <code class="language-html line-num bers">
                    &lt;template>
                    &lt;mj-affix :offset-top="120" @on-change="change">
                        &lt;span class="demo-affix">固定在距离顶部120px的位置&lt;/span>
                    &lt;/mj-affix>
                &lt;/template>

                &lt;script>
                    export default {
                        methods: {
                            change(status){
                                console.log(status)
                            }
                        },
                    }
                &lt;/script>
                </code>
            </pre>
        </div>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Affix 参数"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>offset-top</td>
            		<td>距离窗口顶部达到指定偏移量后触发</td>
            		<td>Number</td>
            		<td>0</td>
            	</tr>
            	<tr>
            		<td>offset-bottom</td>
            		<td>距离窗口底部达到指定偏移量后触发(offset-top、offset-bottom只能存在一个,如果都设置,会使用offset-top)</td>
            		<td>Number</td>
            		<td>-</td>
            	</tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Affix 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>on-change</td>
            		<td>在固定状态发生改变时触发</td>
            		<td>true | false</td>
            	</tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    name: 'affix',
    data() {
        return {

        }
    },
    methods: {
        change(status){
            //console.log(status)
        }
    },
}
</script>

<style scoped>
.demo-affix {
    display: inline-block;
    color: #fff;
    padding: 10px 30px;
    text-align: center;
    background: rgba(0, 153, 229, .9);
}
</style>